import { Button, Card, Form, Input, Table, Tooltip } from 'antd'
import React, { useEffect, useState } from 'react'
//导入icon图标
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
//导入请求接口函数
import { GetAllHospitalSetListData } from '@api/hospital/hospitalset/index'
//导入类型
import { resHospitalsetLists } from '@/api/hospital/hospitalset/model/hospitalsetType';

export default function HospitalSet() {

    //定义一个状态数据
    let [hospitallist, setHospitallist] = useState<resHospitalsetLists>([]);

    //定义一个状态，用来存储当前是第几页
    let [current, setCurrent] = useState(1);

    //定义一个状态，用来存储每一页显示多少条数据
    let [pageSize, setPageSize] = useState(5);

    //定义一个状态，用来存储总条数
    let [total, setTotal] = useState(0);

    //既然请求数据可以在初始化的时候显示，或者将来在搜索的时候，清空数据的时候等等这些位置都需要调用请求函数，所以可以单独声明一个函数
    const reqAllHospitalsetList = async () => {
        let result = await GetAllHospitalSetListData({ page: current, limit: pageSize });
        console.log(result.records);
        //更新状态，里面的值为records的记录
        setHospitallist(result.records)
        setTotal(result.total);
    }

    //组件挂载完成之后和当状态数据也发生了变化的时候，重新进行ajax请求
    useEffect(() => {
        //调用方法
        reqAllHospitalsetList();
    }, [current, pageSize])

    //表格的列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            render: (text: any, records: any, index: number) => {
                return index + 1;
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人电话',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            //自定义的结构使用render回调函数
            render: (text: any, records: any, index: number) => {
                return <>
                    <Tooltip title="编辑">
                        <Button type='primary' icon={<EditOutlined />}></Button>
                    </Tooltip>
                    <Tooltip title="删除">
                        <Button danger type='primary' icon={<DeleteOutlined />}></Button>
                    </Tooltip>

                </>
            }
        },
    ];

    return (
        <Card>
            {/* 表单的搜索 */}
            <Form name="basic" autoComplete="off" layout='inline'>
                <Form.Item name="username">
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item name="password">
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                        查询
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            <div className='h-20'></div>
            {/* 操作按钮 */}
            <div>
                <Button type='primary'>添加</Button>
                <Button className='ml' disabled>批量删除</Button>
            </div>
            <div className='h-20'></div>
            {/* 表格 */}
            <Table
                //数据源
                dataSource={hospitallist}
                //列
                columns={columns}
                //key值
                rowKey='id'
                //是否显示列表框以及表格表框
                bordered
                //分页配置
                pagination={{
                    //当前页数
                    current,
                    //每页显示多少条
                    pageSize,
                    //总数
                    total,
                    //每页显示多少条
                    pageSizeOptions: [5, 10, 15, 20],
                    //快速跳转到某页
                    showQuickJumper: true,
                    //是否显示分页下拉列表
                    showSizeChanger: true,
                    //是否显示总数
                    showTotal: (total: number) => {
                        return `总共${total}条`
                    },
                    //当数字分页和下拉列表分页数据发生了变化的时候
                    onChange: (page: number, pageSize: number) => {
                        //更新点击的数字分页，将这个数值更新到状态数据里面
                        setCurrent(page);
                        setPageSize(pageSize)
                    }
                }}
            />
        </Card>
    )
}
